<!--
 • @Description: 折线图

 • @Author: Ronda

 • @Date: 2022-02-16 09:30:06

 • @LastEditors: Ronda

 • @LastEditTime: 2022-05-23 15:28:41

-->
<template>
  <div>
    <div ref="dualaxes" class="dualaxes-container"></div>
  </div>
</template>

<script>
 import { DualAxes } from '@antv/g2plot';
 import {get} from '@/utils/request';
 import moment from 'moment';
 import { mapState } from 'vuex';
export default {
  data() {
    return {
      title: '实时湿度曲线',
        params: {
          page: 1,
          pageSize: 51,
        },
  
      
        humiData: [],
        noiseData: [],
        dualAxesInstance: null, 
    };
  },
  computed: {
    ...mapState(['ed'])
  },
  methods: {
    loadDualAxes() {
      this.dualAxesInstance = new DualAxes(this.$refs.dualaxes, {
        data: [this.humiData, this.noiseData],
        xField: 'insert_time',
        yField: ['humidity', 'noise'],
        xAxis: {
          label: {
            style: {
              fill: 'white'
            }
          }
        },
        yAxis: {
          'humidity': {
            label: {
              style: {
                fill: 'white'
              }
            }
          },
          'noise': {
            label: {
              style: {
                fill: 'white'
              }
            }
          }
        },
        legend: {
          itemName: {
            formatter: (text) => text, // 保留原始图例文本
            style: (text) => ({ fill: 'white' })
          }
        },
        geometryOptions: [
          {
            geometry: 'line',
            color: '#5B8FF9',
          },
          {
            geometry: 'line',
            color: '#5AD8A6',
          },
        ],
  
        animation: {
          appear: {
            animation: 'wave-in',
            duration: 5000,
          },
        },
  
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              backgroundColor: '#147',
              color: 'white',
              fontSize: 20
            }
          }
        },
      });
  

      this.dualAxesInstance.render();
    },
  
      async getHumData() {
      let res = await get('/dashboard/pageQueryTodayData', { ...this.params, type: 'humidity' });
      console.log(res, '湿度数据响应');
  
      res.data.list.forEach(function (item, index, arr) {
        arr[0].humidity = 0;
        item.insert_time = moment(item.insert_time).format('HH:mm');
      });
      let humi = [];
      res.data.list.forEach((item, index, arr) => {
        if (index % 10 == 0) {
          humi.push(arr[index])
        }
      })
      this.humiData = humi;
  
    },
  
      async getNoiseData() {
      let res = await get('/dashboard/pageQueryTodayData', { ...this.params, type: 'noise' }); // 理想情况下应区分接口
      console.log(res, '噪声数据响应');
      res.data.list.forEach(function (item, index, arr) {
        arr[0].noise = 0;
        item.insert_time = moment(item.insert_time).format('HH:mm');
      });
      let noi = [];
      res.data.list.forEach((item, index, arr) => {
        
        if (index % 10 == 0) {
          noi.push(arr[index])
        }
      })
      this.noiseData = noi;
    },
  },
  created() {},
  async mounted() {
  await Promise.all([this.getHumData(), this.getNoiseData()]);

  console.log('湿度数据:', this.humiData); // 调试
  console.log('噪声数据:', this.noiseData); // 调试
  
  // 确保数据不为空
  if (this.humiData.length && this.noiseData.length) {
    this.loadDualAxes();
  } else {
    console.error('数据为空，湿度:', this.humiData, '噪声:', this.noiseData);
  }
},
};
</script>
<style scoped>
.dualaxes-container {
  width: 100%;
  height: 200px !important; /* 强制设置明确高度 */
  min-height: 200px; /* 防止被压缩 */
  position: relative;
}
.dualaxes-container > div {
  width: 100% !important;
  height: 200px !important;
}
</style>